<template>
    <div class="u-p-20">
        <el-card shadow="never">
            <div slot="header">
                <span>
                    <b class="u-f-16">待发货订单列表</b>
                </span>
            </div>

            <el-form :inline="true" :model="queryForm" size="small" class="u-text-center">
                <el-form-item label="是否拼团：">
                    <el-checkbox-group v-model="queryForm.order_pt">
                        <el-checkbox label="拼团" name="order_pt"></el-checkbox>
                        <el-checkbox label="不拼团" name="order_pt"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="下单时间">
                    <el-date-picker v-model="queryForm.time_section" type="daterange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="订单编号">
                    <el-input v-model="queryForm.keyword" placeholder="订单编号" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="getPageData(true)">查询</el-button>
                </el-form-item>
            </el-form>

            <el-table :data="tableData" class="u-mt-10" v-viewer>
                <el-table-column label="id" prop="id" width="50"></el-table-column>
                <el-table-column label="用户昵称" prop="nick_name"></el-table-column>
                <el-table-column label="订单编号" prop="order_sn"></el-table-column>
                <el-table-column label="订单状态" width="100">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.order_status==1" type="info">待付款</el-tag>
                        <el-tag v-if="scope.row.order_status==2" type="success">已付款</el-tag>
                        <el-tag v-if="scope.row.order_status==3">已发货</el-tag>
                        <el-tag v-if="scope.row.order_status==4" type="warning">已收货</el-tag>
                        <el-tag v-if="scope.row.order_status==5" type="danger">已完成</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="是否拼团" width="100">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.goods_type>0" type="success">拼团</el-tag>
                        <el-tag v-else type="info">不拼团</el-tag>
                        <br />
                    </template>
                </el-table-column>
                <el-table-column label="订单金额" prop="order_total"></el-table-column>
                <el-table-column label="添加日期" prop="create_date" sortable></el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click.native="handleRoute(scope.row.id,'orderDetail')" v-if="hasPerm('orderDetail')">详情</el-button>
                        <el-button size="mini" type="text" @click.native="setLogistics(scope.row.id)">一键发货</el-button>
                        <el-button size="mini" type="text" @click.native="openAddr(scope.row)">复制发货地址</el-button>
                    </template>
                </el-table-column>

               <!-- <el-table-column label="操作" width="120">
                    <template slot-scope="scope">
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                操作
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="handleRoute(scope.row.id,'orderDetail')" v-if="hasPerm('orderDetail')">
                                    <el-button size="mini" type="text">详情</el-button>
                                </el-dropdown-item>
                                <el-dropdown-item @click.native="setLogistics(scope.row.id)">
                                    <el-button size="mini" type="text">一键发货</el-button>
                                </el-dropdown-item>
                                <el-dropdown-item @click.native="openAddr(scope.row)">
                                    <el-button size="mini" type="text">复制发货地址</el-button>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column> -->
            </el-table>

            <div class="u-mt-20 u-text-center">
                <el-pagination background @size-change="handleSizeChange" @current-change="handlePageChange"
                    :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
                    :total="total"></el-pagination>
            </div>
        </el-card>
        <el-dialog title="填写物流信息" :visible.sync="is_logistics_show" width="60%">
            <el-form :model="objForm" label-width="80px">
                <el-table :data="goodsData" @selection-change="handleSelectionChange" class="u-mt-10" v-viewer>
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column label="id" prop="id" width="50"></el-table-column>
                    <el-table-column label="图片">
                        <template slot-scope="scope">
                            <el-image style="max-width: 50px;" :src="scope.row.goods_img" :data-src="scope.row.goods_img"
                                fit="cover" lazy></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column label="标题" prop="goods_title"></el-table-column>
                    <el-table-column label="中数量" prop="goods_number"></el-table-column>
                    <el-table-column label="已发货" prop="send_number"></el-table-column>
                    <el-table-column label="未发货" prop="need_number"></el-table-column>
                    <el-table-column label="发货数">
                        <template slot-scope="scope">
                            <el-input-number size="mini" v-model="scope.row.now_send_number" :max="scope.row.need_number" />
                        </template>
                    </el-table-column>
                </el-table>
                <el-form-item label="快递名称" style="margin-top: 30px">
                    <el-select v-model="code" placeholder="请选择快递名称">
                        <el-option label="请选择" value="0"></el-option>
                        <el-option v-for="(item) in logistics" :key="item.id" :label="item.logistics_name" :value="item.logistics_code"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="运单号">
                    <el-col :span="11">
                        <el-input v-model="number" type="text" placeholder="请输入运单号"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="备注信息">
                    <el-col :span="11">
                        <el-input type="textarea" v-model="remark"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogClose()">取 消</el-button>
                <el-button type="primary" @click="submitLogistics()">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="发货地址" :visible.sync="is_addr_show" width="40%">
            <el-form label-width="130px">
                <el-form-item label="发货地址信息">
                    <el-input type="textarea" :rows="4" v-model="addr"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="closeAddr()">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import commonPage from "@/mixins/common-page";
    export default {
        mixins: [commonPage],
        data() {
            return {
                apiName: "order",
                queryForm: {
                    time_section: "", //下单时间区间
                    order_pt: [], //是否是拼团订单
                    status: "send",
                    keyword: ""
                },
                objForm: {
                    id: ""
                },
                is_addr_show: false,
                id: "",
                addr: "",
                goodsData: [],
                logistics: [],
                is_logistics_show: false,
                send_type: "0",
                item_id: [],
                item_number: [],
                code: "",
                number: "",
                remark: ""
            };
        },
        methods: {
            openAddr(info) {
                // console.log(info);
                this.addr =
                    info.take_name + "\r" + info.take_phone + "\r" + info.take_address;
                this.is_addr_show = true;
            },
            closeAddr() {
                this.is_addr_show = false;
            },
            getItemsInfo() {
                let self = this;
                var josn = {
                    id: self.objForm.id,
                    type: "system"
                };
                self.$api[self.apiName].getItemsInfo(josn).then(response => {
                    if (response.code == 1) {
                        self.goodsData = response.data;
                    }
                });
            },
            getLogisticsAll() {
                let self = this;
                if (self.logistics.length <= 0) {
                    self.$api[self.apiName].logisticsAll().then(response => {
                        if (response.code == 1) {
                            self.logistics = response.data;
                        }
                    });
                }
            },
            setLogistics(id) {
                this.objForm.id = id;
                this.getItemsInfo();
                this.is_logistics_show = true;
            },
            submitUpdate() {
                let item_number_temp = [];
                let item_id_temp = [];
                this.goodsData.forEach(item => {
                    if (item.select) {
                        item_id_temp.push(item.id);
                        item_number_temp.push(item.now_send_number);
                    }
                });
                this.item_id = item_id_temp;
                this.item_number = item_number_temp;
            },
            handleSelectionChange(e) {
                let self = this;
                if (self.goodsData) {
                    self.goodsData.forEach((itemx, index) => {
                        self.goodsData[index].select = false;
                        if (e) {
                            e.forEach(item => {
                                if (itemx.id == item.id) {
                                    self.goodsData[index].select = true;
                                }
                            });
                        }
                    });
                }
            },
            dialogClose() {
                this.is_logistics_show = false;
            },
            beforeOnLoad() {
                this.getLogisticsAll();
            },
            submitLogistics() {
                this.submitUpdate();
                let form = {
                    order_id: this.objForm.id,
                    item_id: this.item_id.join(","),
                    item_number: this.item_number.join(","),
                    code: this.code,
                    number: this.number,
                    remark: this.remark
                };
                let self = this;
                self.$api[self.apiName].saveLogistics(form).then(response => {
                    if (response.code == 1) {
                        self.is_logistics_show = false;
                        self.item_id = [];
                        self.item_number = [];
                        self.code = "";
                        self.number = "";
                        self.remark = "";
                        self.getPageData();
                    }
                });
            }
        }
    };
</script>
